<template>
  <section class="changebase-wrap">
    <van-nav-bar title="修改订单"
                 fixed
                 @click-left="onClickLeft"
                 @click-right="onClickRight">
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>
    <div class="container">
      <div class="sub">
        <div class="detailInfo detail-border">
          <p class="detail-title">基本信息</p>
          <p class="detail-item">
            <span class="item-left">客户名称：</span>
            <span class="item-right">{{orderData.kaUserName}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">订单号：</span>
            <span class="item-right">{{orderData.kaUserTrackingNumber}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">内部订单号：</span>
            <span class="item-right">{{orderData.trackingNumber}}</span>
          </p>
        </div>

      </div>

      <div class="cellInfo">
        <!-- <van-field label="时效(天)" v-model="orderData.estimatedPrescription" size="large" placeholder="请输入" input-align="right"/> -->
        <van-cell title="付款方式"
                  :value="setSheetData(orderData.kaPayment,0)"
                  size="large"
                  :is-link="orderData.payStatus==0&&orderData.pushStatus==0"
                  value-class="cell-value"
                  @click="showSheet(0)" />
        <van-cell title="期望上门时间"
                  v-if="orderData.kaPickup==1"
                  :value="pageTime"
                  size="large"
                  title-class="cell-title"
                  is-link
                  @click="showTime"
                  value-class="cell-value" />
        <!-- <van-cell title="短信配置"
                  :value="setSheetData(orderData.kaUserSms,1)"
                  size="large"
                  value-class="cell-value" /> -->
        <van-cell title="疫情物资"
                  :value="setSheetData(orderData.ncpType,2)"
                  size="large"
                  is-link
                  value-class="cell-value"
                  @click="showSheet(2)" />
        <van-field v-model="orderData.kaRemarks"
                   size="large"
                   label="订单备注"
                   placeholder="请输入订单备注"
                   input-align="right"
                   type="textarea"
                   autosize
                   rows="1" />
        <!-- <van-field v-model="orderData.modifyRemark"
                   size="large"
                   label="修改备注"
                   placeholder="请输入修改备注"
                   required
                   rows="1"
                   autosize
                   type="textarea"
                   maxlength="50"
                   show-word-limit
                   input-align="right"
                    /> -->
      </div>
    </div>
    <div class="footer">
      <div class="btn-wrap">
        <div class="btn-left"
             @click="handelCancel">
          <span>取消</span>
        </div>
        <div class="btn-right"
             @click="handelSave">
          <span>保存</span>
        </div>
      </div>
    </div>
    <div class="popup-wrap"></div>
    <van-action-sheet :round="false"
                      v-model="show"
                      :actions="actions"
                      cancel-text="取消"
                      @cancel="onCancel"
                      @select="onSelect" />
    <van-popup v-model="showTimeSelect"
               position="bottom"
               :get-container="getContainer">
      <van-tree-select height="58vw"
                       :items="items"
                       :main-active-index.sync="activeIndex"
                       :active-id.sync="activeId"
                       @click-item="clickItemRight">
        <!-- <template slot="content">
            <div class="time-items" v-if="active === 0">
              <p class="time-item">两小时内</p>
            </div>
            <div class="time-items" v-if="active === 1||active === 2">
              <p class="time-item">9:00-11:00</p>
              <p class="time-item">11:00-13:00</p>
              <p class="time-item">13:00-15:00</p>
              <p class="time-item">15:00-17:00</p>
              <p class="time-item">17:00-19:00</p>
            </div>
          </template> -->
      </van-tree-select>
      <div class="sure-btn"
           @click="handelSureTime">
        确定
      </div>
    </van-popup>
  </section>
</template>

<script>
import { PAYMENT, NCPTYPE, KAUSERSMS } from '@/constants/actionsheet.js';
import Vue from 'vue';
import { TreeSelect } from 'vant';
import { orderSelect, orderChange } from '@/api/order';
import { userPaySelect } from '@/api/customer';

Vue.use(TreeSelect);
export default {
  data () {
    return {
      orderId: '',

      show: false,
      showTimeSelect: false,
      actions: [],
      actionsType: 0,
      activeIndex: 0,
      activeIndexTemp: 0,
      activeId: 0,
      ordermask: '',
      orderData: {
        // modifyRemark: ''
      },
      timeselect: {
        text: '两小时内',
        id: 0,
        time: 24
      },
      timeselectTemp: {
        text: '两小时内',
        id: 0,
        time: 24
      },
      items: [
        {
          text: '今天',
          children: [
            {
              text: '两小时内',
              id: 0,
              time: 24
            },
            {
              text: '9:00-11:00',
              id: 1,
              time: 9
            },
            {
              text: '11:00-13:00',
              id: 2,
              time: 11
            },
            {
              text: '13:00-15:00',
              id: 3,
              time: 13
            },
            {
              text: '15:00-17:00',
              id: 4,
              time: 15
            },
            {
              text: '17:00-19:00',
              id: 5,
              time: 17
            }
          ]
        },
        {
          text: '明天', children: [

            {
              text: '9:00-11:00',
              id: 1,
              time: 9
            },
            {
              text: '11:00-13:00',
              id: 2,
              time: 11
            },
            {
              text: '13:00-15:00',
              id: 3,
              time: 13
            },
            {
              text: '15:00-17:00',
              id: 4,
              time: 15
            },
            {
              text: '17:00-19:00',
              id: 5,
              time: 17
            }
          ]
        }, {
          text: '后天', children: [

            {
              text: '9:00-11:00',
              id: 1,
              time: 9
            },
            {
              text: '11:00-13:00',
              id: 2,
              time: 11
            },
            {
              text: '13:00-15:00',
              id: 3,
              time: 13
            },
            {
              text: '15:00-17:00',
              id: 4,
              time: 15
            },
            {
              text: '17:00-19:00',
              id: 5,
              time: 17
            }
          ]
        }
      ],
      pageTime: '',
      timeOffset: false
    };
  },
  mounted () {
    this.orderId = this.$route.query.orderId;
    if (this.orderId) {
      this.getData();
    }

    let time = new Date().getHours();

    if (time >= 19) {
      this.timeOffset = true;
      this.items.splice(0, 1);
    } else {
      this.items[0].children = this.items[0].children.filter(item => {
        return item.time + 2 > time;
      });
    }
  },
  methods: {
    getData () {
      orderSelect(this.orderId).then(res => {
        this.orderData = res.data;

        // this.orderData.pushPlatform = this.orderData.pushPlatformPc;
        this.orderData.tiHuoPrice = this.orderData.kaArPickUp ? this.orderData.kaArPickUp : 0;
        this.orderData.faHuoPrice = this.orderData.kaArSend ? this.orderData.kaArSend : 0;
        this.orderData.ganXianPrice = this.orderData.kaArFreight ? this.orderData.kaArFreight : 0;
        if (this.orderData.kaPickup == 1) {
          this.pageTime = `${this.orderData.kaAppointmentStart.slice(0, 16)}-${this.orderData.kaAppointmentEnd.slice(10, 16)}`;
        }
        // if (!this.orderData.modifyRemark) {
        //   this.orderData.modifyRemark = '';
        // }
        this.getPay();
      });
    },
    getPay () {
      userPaySelect(this.orderData.kaUserId).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.kaPayment = res.data.kaPayment;
        }
      });
    },
    showSheet (type) {
      this.actionsType = type;
      switch (this.actionsType) {
        case 0:
          // 获取用户的支付方式  +  现付
          this.actions = PAYMENT.filter(item => {
            return item.key == this.kaPayment;
          });
          this.actions.unshift({ name: '现付', key: 0 });
          if(this.kaPayment >=5){
            switch (this.kaPayment){
              case 6:
                this.actions.unshift({ name: '月结', key: 1 });
                break;
              case 7:
                this.actions.unshift({ name: '半月结', key: 2 });
                break;
              case 8:
                this.actions.unshift({ name: '周结', key: 3 });
                break;
              case 9:
                this.actions.unshift({ name: '自定义', key: 4 });
                break;
              default:
                break;
            }
            this.actions.unshift({ name: '欠付', key: 5 });
          }
          if (this.orderData.payStatus == 0 && this.orderData.pushStatus == 0) {
            this.show = true;
          }
          break;
        case 1:
          this.actions = KAUSERSMS;
          this.show = true;
          break;
        case 2:
          this.actions = NCPTYPE;
          this.show = true;
          break;

        default:
          break;
      }
    },
    setSheetData (data, type) {
      if (!data && data != 0) {
        return '';
      }
      switch (type) {
        case 0:
          return PAYMENT[data].name;
        case 1:
          return KAUSERSMS[data].name;
        case 2:
          return NCPTYPE[data].name;

        default:
          break;
      }

    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      console.log(item);
      switch (this.actionsType) {
        case 0:
          this.orderData.kaPayment = item.key;
          break;
        case 1:
          this.orderData.kaUserSms = item.key;
          break;
        case 2:
          this.orderData.ncpType = item.key;
          break;

        default:
          break;
      }
      this.show = false;
    },
    showTime () {
      //0待提货 1-已提货 2-已承运 3-待承运 4-出运 7-到达站点 10派送中 13-签收(妥投) 14 异常签收  15 拒签 18回执已取
      if ([1, 2, 3, 4, 7, 13, 14, 15, 18].includes(this.orderData.orderStatusBack)) {
        this.$toast.fail('已提货后不允许修改该项');
        return;
      }
      this.showTimeSelect = true;
    },
    handelSureTime () {
      this.showTimeSelect = false;
      this.timeselect = this.timeselectTemp;
      this.activeIndexTemp = this.activeIndex;
      let date = this.fundate(this.timeOffset ? this.activeIndexTemp + 1 : this.activeIndexTemp);

      let hours = new Date().getHours();

      if (this.timeselect.time == 24) {
        this.orderData.kaAppointmentStart = `${date} ${hours < 10 ? `0${hours}` : hours}:00:00`;
        this.orderData.kaAppointmentEnd = `${date} ${hours + 2 < 8 ? `0${hours + 2}` : hours + 2}:00:00`;
      } else {

        this.orderData.kaAppointmentStart = `${date} ${this.timeselect.time}:00:00`;
        this.orderData.kaAppointmentEnd = `${date} ${this.timeselect.time + 2}:00:00`;
      }
    },
    clickItemRight (data) {
      this.timeselectTemp = data;

    },
    onCancel () {
      this.show = false;
    },
    handelCancel () {
      this.$router.back();
      console.log('handelCancel');
    },
    handelSave () {
      if (this.orderData.orderStatusBack >= 13) {
        this.$toast.fail('该订单状态不能修改基本信息');
        return;
      }
      if (this.orderData.modifyStatus == 1) {
        this.$toast.fail('该订单已在审核修改中');
        return;
      }
      // if (!this.orderData.modifyRemark) {
      //   this.$toast.fail('请填写修改订单备注');
      //   return;
      // }
      if (this.orderData.kaPickup == 0) {
        this.orderData.kaAppointmentStart = null;
        this.orderData.kaAppointmentEnd = null;
      }
      this.orderData.kaOrderId = this.orderId;
      this.orderData.isAbnomal = 0;
      this.orderData.userContractId =  this.$router.history.current.query.userContractId
      this.orderData.isSupplies = this.orderData.ncpType != 0 ? 1 : 0;
      this.orderData.peoplePrice = (Number(this.orderData.ganXianPrice) + Number(this.orderData.faHuoPrice) + Number(this.orderData.tiHuoPrice)).toFixed(2);
      this.pushPlatformPc = this.pushPlatform == 1?null:this.pushPlatform;
      this.orderData.carrierFlag = 0; // 确认承运的标识
        // if(this.orderData.modifyRemark.trim()=="") {
        //   this.orderData.modifyRemark = "";
        //    this.$toast.fail("请填写修改订单备注");
        // } else {
        //   orderChange(this.orderData).then(res => {
        //     if (res.code == 200) {
        //       this.$router.back();
        //     }
        //   });
        // }
       orderChange(this.orderData).then(res => {
          if (res.code == 200) {
            this.$router.back();
          }
        });
        
      
  
        console.log(orderChange);
 
      

    },
    onClickLeft () {
      this.$router.back();
    },
    onClickRight () {
      let url = window.location.host;

      let index = url.indexOf('pre');

      if (index <= -1) {
        window.location.href = 'https://ka.lecarlink.com/index.aspx';
      } else {
        window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }
    },
    getContainer () {
      return document.querySelector('.popup-wrap');
    },
    // 计算明天的日期
    fundate (aa) {

      let date = new Date();

      date.setDate(date.getDate() + aa);
      let y = date.getFullYear();

      let m = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;

      let d = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();

      let time = `${y}-${m}-${d}`;

      return time;
    }
  },
  watch: {
    activeIndexTemp (newval) {
      let setdateDay = newval;

      let datestr = this.fundate(this.timeOffset ? setdateDay + 1 : setdateDay);

      this.pageTime = `${datestr}  ${this.timeselect.text}`;
    },
    timeselect () {
      let datestr = this.fundate(this.timeOffset ? this.activeIndexTemp + 1 : this.activeIndexTemp);

      this.pageTime = `${datestr}  ${this.timeselect.text}`;
    }
  },
  components: {

  }
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 74px 15px;
  font-size: 16px;
  .sub {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .detailInfo {
      padding: 10px 15px;
      position: relative;
      margin-bottom: 20px;
      .detail-title {
        color: #333;
        text-align: left;
        font-weight: 500;
        padding-bottom: 10px 0;
      }
      .detail-item {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .item-left {
          flex: 0 0 auto;
          margin-right: 10px;
          color: #999;
        }
        .item-right {
          color: #333;
          text-align: right;
        }
      }
    }
  }
  .cellInfo {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    /deep/ .van-cell {
      border-radius: 4px;
    }
    .cell-title {
      flex: 0 0 auto;
    }
    .cell-value {
      color: #333;
    }
  }
}

.footer {
  background: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fdf3e4;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
.changebase-wrap {
  /deep/ .van-sidebar-item--select {
    border-color: #f18d00;
  }
  /deep/ .van-tree-select__item--active {
    color: #f18d00;
  }
  /deep/ .van-tree-select__nav-item {
    padding: 16px 8px 16px 16px;
  }
  .time-items {
    padding: 10px;
    .time-item {
      padding: 10px 10px 10px 20px;
    }
  }
  .sure-btn {
    width: 343px;
    height: 44px;
    line-height: 44px;
    margin: 10px auto;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background: #f18d00;
    border-radius: 4px;
  }
}
</style>
